<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chat</title>
    <style>
      .dataDiv {
        width: 400px;
        margin: auto;
        border: 1px solid black;
        border-radius: 10px;
      }
      /* 头部样式 */
      .topDiv {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        font-weight: 600;
        padding-left: 20px;
        box-sizing: border-box;
      }
      /* 身体样式 */
      .bodyDiv {
        width: 100%;
        height: 450px;
      }
      .leftDiv {
        width: 100%;
        height: 120px;
      }
      .left1 {
        width: 50px;
        height: 50px;
        background-color: blue;
        float: left;
        margin-top: 10px;
        margin-left: 15px;
        margin-right: 10px;
        text-align: center;
        line-height: 50px;
        color: white;
        border-radius: 50%;
      }
      .left2 {
        width: 60%;
        height: 80px;
        float: left;
        margin-top: 10px;
      }
      .leftTime {
        text-align: left;
      }
      .leftContent {
        background-color: rgb(232, 228, 228);
        font-size: 17px;
        padding: 15px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-top: 5px;
      }
      .rightDiv {
        width: 100%;
        height: 120px;
      }
      .right1 {
        width: 50px;
        height: 50px;
        background-color: blue;
        float: right;
        margin-top: 10px;
        margin-left: 15px;
        margin-right: 10px;
        text-align: center;
        line-height: 50px;
        color: white;
        border-radius: 50%;
      }
      .right2 {
        width: 60%;
        height: 80px;
        float: right;
        margin-top: 10px;
      }
      .rightTime {
        text-align: right;
      }
      .rightContent {
        background-color: rgb(83, 83, 213);
        font-size: 17px;
        padding: 15px;
        border-radius: 10px 0 10px 10px;
        margin-top: 5px;
        color: white;
      }
      /* 底部样式 */
      .bottomDiv {
        width: 100%;
        height: 150px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        position: relative;
      }
      .text {
        width: 100%;
        height: 100%;
        /* 取消自动增大 */
        border-width: 0;
        box-sizing: border-box;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        /* 去掉选中状态 */
        outline: none;
        padding: 15px;
        /* 禁止拖拽变化 */
        resize: none;
      }
      .btn {
        width: 90px;
        height: 35px;
        background-color: skyblue;
        border-radius: 10px;
        font-size: 17px;
        color: white;
        /* 子绝父相 */
        position: absolute;
        right: 15px;
        bottom: 15px;
      }
    </style>
  </head>
  <body>
    <!-- 将页面分割为能解决的最小单元 -->
    <div class="dataDiv">
      <!-- 头部 -->
      <div class="topDiv">王者峡谷交流圈</div>
      <hr />

      <!-- 身体 -->
      <div class="bodyDiv">
        <!-- leftDiv -->
        <div class="leftDiv">
          <div class="left1">牛魔</div>
          <div class="left2">
            <div class="leftTime">17:25</div>
            <div class="leftContent">我杀过的鲁班可以绕峡谷两圈</div>
          </div>
        </div>
        <!-- rightDiv -->
        <div class="rightDiv">
          <div class="right1">杨戬</div>
          <div class="right2">
            <div class="rightTime">17:30</div>
            <div class="rightContent">身体里沉睡的野兽，觉醒啦</div>
          </div>
        </div>
        <!-- leftDiv -->
        <div class="leftDiv">
          <div class="left1">达摩</div>
          <div class="left2">
            <div class="leftTime">17:35</div>
            <div class="leftContent">锐利的剑，锐利的眼，重铸德玛西亚荣光</div>
          </div>
        </div>
      </div>
      <hr />

      <!-- 底部 -->
      <div class="bottomDiv">
        <!-- 多行输入框 -->
        <textarea placeholder="请输入内容" class="text"></textarea>
        <!-- 发送按钮 -->
        <input type="button" class="btn" value="发送" />
      </div>
    </div>
  </body>
</html>
